<template>
	<view class="footer-navbar">
		<view class="navbar-item">
			<view class="item" @click="clickNavbar('home', '/pages/home/index')">
				<view class="icon"></view>
				<text>首页</text>
			</view>
			<view class="item" @click="clickNavbar('my', '/pages/my/index')">
				<view class="icon">
					<view class="user-status" v-if="userStatus && userStatus?.pages">{{ userStatus?.authLabel }}</view>
				</view>
				<text>我的</text>
			</view>
		</view>
	</view>
	<view class="footer-black"></view>
</template>

<script setup>
import { computed } from "vue";
import { useDict } from "@/dict/index.js"
import { useStore } from "vuex"
const store = useStore()
// 字典
const userStatusOptions = useDict('userStatusOptions')
// 用户状态
const userStatus = computed(() => {
	const value = store.state.app.userStatus
	return userStatusOptions?.useDictItem(value) || null
})

// 导航跳转
const clickNavbar = (type, page) => {
	// 判断用户需要去认证，去缴费的逻辑
	console.log('userStatus', userStatus)
	if(type === 'my') {
		if(userStatus.value && userStatus.value?.pages) {
			wx.navigateTo({
			  url: userStatus.value.pages,
			})
			return
		}
	}
	console.log('page', page)
	wx.navigateTo({
	  url: page,
	})
}
</script>

<style lang="scss" scoped>
	.footer-black {
		height: 150rpx;
	}
	.footer-navbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		z-index: 100;
		background: #FFFFFF;
		border-top: 1px solid #000;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #F0F0F0;
	}
	.navbar-item {
		display: flex;
		.item {
			flex: 1;
			padding: 28rpx 0 32rpx;
		}
		.icon {
			position: relative;
			width: 44rpx;
			height: 44rpx;
			margin: auto;
			background-color: red;
		}
		text {
			display: block;
			font-size: 20rpx;
			margin-top: 5rpx;
			text-align: center;
		}
	}
	.user-status {
		position: absolute;
		left: 32rpx;
		top: -8rpx;
		z-index: 10;
		border-radius: 50px;
		border: 1px solid rgba(0, 0, 0, .3);
		background-color: #FFFFFF;
		padding: 8rpx 16rpx;
		font-size: 20rpx;
		word-break: keep-all;
	}
</style>